<template>
    <ModalFormTemplate
      ref="modalRef"
      :open="open"
      :formConfig="formConfig"
      :title="title"
      :width="width"
      @cancel="onCancel"
      @finish="onFinish"
    />
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue';
  import ModalFormTemplate from '@/components/template/form/modal-form-template.vue';
  import { bizApi } from '@/api/biz';

  const title ="添加代理商";//弹窗标题
  const width = 750;//弹窗宽度
  const modalRef = ref();//通用模态弹窗组件引用，用与调用模态弹窗组件内部方法
  const open = ref(false);//控制弹窗显示、隐藏
  const emits = defineEmits<{ dataReload: []; }>();//通知调用组件(父组件) 执行 父组件 的 @dataReload 的方法
  defineExpose({ show });//暴露接口 show(显示弹窗) 方法，供 父组件 调用

  /* [关闭弹窗] 1. 重置表单 2. 关闭弹窗 */
  function onCancel() {
    modalRef.value.resetForm();
    open.value = false;
  } 

  /* [显示弹窗] 1. 显示弹窗  */
  function show() {
    open.value = true;
    getAreaCodeSelectList();   // 获取地区级联选择数据
  }

  /* [提交弹窗] 1. 调用子组件 提交方法 2. 提交成功后，关闭弹窗 3. 刷新父组件数据 */
  async function onFinish() {
    const params = modalRef.value?.getFormParams();
    const mergedParams = {...addParams,...params};//合并提交参数
    try {
      const ret = await modalRef.value?.postFormData(addAction, mergedParams);
      if (ret === true) {
        onCancel();
        emits('dataReload');
      }
    } catch (error) {}
  }
  const addAction = 'base.agent.agent.ServiceImpl.save';//save接口 方法名
  const addParams = {agent_id: 0};//save接口 参数

  const areaCodeSelectData = ref<any[]>([]);   // 地区级联选择数据
  const getAreaCodeSelectList = async () => {
    const getAreaCodeSelectList = await bizApi.httpList(areaCodeSelectAction, {});
    areaCodeSelectData.value = getAreaCodeSelectList;
  }
  const areaCodeSelectAction = 'base.manage.area.ServiceImpl.getAreaSelectDTO';



  /* [表单配置] */
    const formConfig = computed(() => [
    {
      title: '代理商名称',
      dataIndex: 'agent_name',
      type: 'input' as const,
      maxlength: 250,
      required: true,
    },
    {
      title: '简称',
      dataIndex: 'agent_short_name',
      type: 'input' as const,
      maxlength: 50,
      required: true,
    },
    {
      title: '所属OEM',
      dataIndex: 'oem_id',
      type: 'select' as const,
      required: true,
      props: {
        options: {
          action: "base.agent.oem.ServiceImpl.listSelectByOemId",
          params: {}
        }
      },
    },
    {
      title: '联系人',
      dataIndex: 'agent_contact_name',
      type: 'input' as const,
      maxlength: 200,
      required: true,
    },
    {
      title: '联系电话',
      dataIndex: 'agent_contact_phone',
      type: 'input-number' as const,
      maxlength: 13,
      required: true,
    },
    {
      title: '邮箱',
      dataIndex: 'agent_contact_email',
      type: 'input' as const,
      maxlength: 111,
      required: true,
    },
    {
      title: '所属上级代理商',
      dataIndex: 'parent_agent_id',
      type: 'select' as const,
      props: {
        options: {
          action: "base.agent.agent.ServiceImpl.listSelectByParentId",
          params: {}
        }
      },
    },
    {
      title: '代理商类型',
      dataIndex: 'agent_type',
      type: 'select' as const,
      required: true,
      props: {
        options: [
          {label:"个人",value:1},
          {label:"企业",value:2}
        ]
      }
    },
    {
      title: '地区',
      dataIndex: 'area_code_path_list',
      type: 'cascader' as const,
      props: {
        options: areaCodeSelectData.value
      },
      required: true,
    },
    {
      title: '详细地址',
      dataIndex: 'address',
      type: 'input' as const,
      required: true,
    },
    {
      title: '营业执照照片',
      dataIndex: 'business_license_copy_list',
      type: 'upload' as const,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '身份证人像面照片',
      dataIndex: 'id_card_copy_list',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '身份证国徽面照片',
      dataIndex: 'id_card_national_list',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '手持承诺函照片',
      dataIndex: 'legal_person_commitment_list',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '备注',
      dataIndex: 'remark',
      type: 'input' as const,
      maxlength: 250,
    },
    {
      title: '允许发展下级商户', 
      dataIndex: 'biz_mch_status',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
    },
    {
      title: '允许发展下级代理', 
      dataIndex: 'biz_agent_status',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
    },
    {
      title: '状态', 
      dataIndex: 'agent_status',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '启用',
        checkedValue: 1,
        unCheckedChildren: '停用',
        unCheckedValue: 2
      },
    },
  ]);
</script>
<style lang="less" scoped></style>
